<template>
  <div id="warp">
        <vheader v-if="headerStatic"></vheader>
        <div class="loading" v-if="loading"><span></span></div>
<!--         <keep-alive>
  <transition :name="names" mode="out-in">
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </transition>
</keep-alive> -->
        <transition :name="names" mode="out-in">
          <router-view></router-view>
        </transition>

        <span @click="upMp" v-if="mpSpan" class="newSpanA" :class="{'active':mpPlay}"></span>
        <router-link tag="span" :to="{path:'/newList'}" class="newSpan"></router-link>

        <vfooter v-if="footerStatic"></vfooter>
        <alert :txt="alertStaticTxt" v-if="alertStatic"></alert>

        <VueAudio :date="mpUrl"/>
        
  </div>
</template>

<script>
import vheader from '@/components/header'
import vfooter from '@/components/footer'
import vloading from '@/components/loading'
import alert from '@/components/alert'
import VueAudio from '@/components/audio'

import { mapState } from 'vuex'
import axios from 'axios'

import {GetToken} from '@/config/api.js'
import '@/assets/js/rem.js'

export default {
  name: 'app',
  data(){
    return {
      names:"left",
      footerStatic:true,
      headerStatic:true
    }
  },
  created:function(){
    if(!this.vCheck()){
        this.getToken()
    }else{
        this.getLogin()
    }
  },
  computed: {
    ...mapState({
      loading: state => state.loading,
      alertStatic: state => state.alertStatic,
      alertStaticTxt: state => state.alertStaticTxt,
      mpUrl: state => state.mpUrl,
      mpPlay: state => state.mpPlay,
      mpSpan: state => state.mpSpan,
    })
  },
  watch:{
    $route(to,from){ //导航发生变化，$route也就是会改变
      if(to.meta.index<from.meta.index){
        this.names = 'right'
      }else{
        this.names = 'left'
      }
      if(to.meta.footer==false){
        this.footerStatic = false
      }else{
        this.footerStatic = true
      }
      //头部展示
      if(to.meta.header==false){
        this.headerStatic = false
      }else{
        this.headerStatic = true
      }
    }
  },
  components:{
  	vheader,vfooter,vloading,alert,VueAudio
  },
  methods:{
    //打开播放器
    upMp(){
      this.$store.dispatch("mpOpen")
    },
    async getToken(){
        let data= await GetToken()
        let token=data.data.access_token
        var arr = token.split('');
        var passToken = "";
        for (var i = 0; i < token.length; i++) {
          passToken += arr[i].charCodeAt();
          passToken += "/";
        }
        var lastToken = passToken.substring(0, passToken.length - 1)
        var d = new Date();
        d.setTime(d.getTime() + (604800000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = "token" + "=" + lastToken + "; " + expires;
        this.$store.dispatch("tokensync",token);
        window.location.reload();
      },
      getLogin(){
        let login='';
        let name = "login" + "=";
        let ca = document.cookie.split(';');
        for (let i = 0; i < ca.length; i++) {
            let c = ca[i].split("=");
            if(this.trimStr(c[0])=="login"){
                login=c[1];
            }
        };
        if(login!=''){
          //用户已登录
          var miwen = '';
          var arr = login.split("/");
          for(var i in arr){
            miwen += String.fromCharCode(arr[i]);
          }
          console.log('已登录')
          this.$store.dispatch("login",miwen);
          this.$router.push({ path: '/index'})
        }else{
          console.log('未登录')
        }
      }
  }
}

</script>

<style>
.left-enter-active, .left-leave-active {
  transition: all .5s;
}
.left-enter-active{
  opacity: 1;
  transform: translateX(0);
}
.left-enter{
  opacity: 0;
  transform: translateX(100%);
}
.left-leave-active {
  opacity: 1;
  transform: translateX(0);
}
.left-leave {
  opacity: 0;
  transform: translateX(0);
}

.right-enter-active, .right-leave-active {
  transition: all .5s;
}
.right-enter-active{
  opacity: 1;
  transform: translateX(0);
}
.right-enter{
  opacity: 0;
  transform: translateX(-100%);
}
.right-leave-active {
  opacity: 1;
  transform: translateX(0);
}
.right-leave {
  opacity: 0;
  transform: translateX(0);
}


</style>

